<template>
    <h3 class="text-center">购物车</h3>
 <table class="table table-striped table-hovered table-bordered ">
    <thead>
        <tr >
            <th>#</th><th>名称</th><th>价格</th><th>图片</th><th>数量</th>
        </tr>
    </thead>
      <tbody>
      <tr v-for="item in carts" :key="item.id">
        <td>{{item.id}}</td> <td>{{item.title}}</td> <td>{{item.price}}</td> 
        <td >
        <img :src="item.src" style="height:50px">
        </td>   
        <!-- <td>
            {{item.num}}
        </td>                                                                              -->
        <td>
            <div class="mui-numbox">
					<button class="mui-btn mui-btn-numbox-minus" type="button" @click="subnum(item)">-</button>
					<input class="mui-input-numbox" type="number" :value="item.num">
					<button class="mui-btn mui-btn-numbox-plus" type="button" @click="addnum(item)">+</button>
				</div></td>
      </tr>
      </tbody>   
      <tfoot v-if="carts.length">
        <tr><td class="text-end" colspan="4">总额：</td>
        
        <td >
            {{ getTotal.toFixed(2) }}
        </td>
       </tr>  
      </tfoot>              
       </table>
       
</template>

<script setup>
import {useShopStore} from '../store/store'
import {storeToRefs} from 'pinia'
const shopStore = useShopStore();
const {carts,getTotal}  =  storeToRefs(shopStore)
const subnum = (item)=>{
    shopStore.setCartsSubNum(item)
}
const addnum = (item)=>{
    shopStore.setCartsAddNum(item)
}
</script>

<style scoped>

</style>